<!doctype html>
<html lang="zh-CN">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">

    <title>技术调研与功能评审 - Reveal.js Demo</title>

    <!-- 引入 Reveal.js 的核心样式 -->
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/reveal.js/5.0.4/reveal.min.css">
    <!-- 选择主题：black, white, league, beige, sky, night, serif, simple, solarized -->
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/reveal.js/5.0.4/theme/black.min.css">
    <!-- 引入代码高亮样式 (Monokai Sublime) -->
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.9.0/styles/monokai-sublime.min.css">

    <style>
        /* 自定义微调 CSS */
        .reveal h1, .reveal h2, .reveal h3 {
            text-transform: none; /* 防止英文强制大写 */
            font-family: 'PingFang SC', 'Microsoft YaHei', sans-serif;
        }
        .reveal p, .reveal li {
            font-family: 'PingFang SC', 'Microsoft YaHei', sans-serif;
            font-size: 0.9em;
            line-height: 1.6;
        }
        /* 强调色 */
        .highlight-text { color: #42affa; font-weight: bold; }
        .danger-text { color: #ff5e5e; font-weight: bold; }
        
        /* 表格样式优化 */
        .reveal table {
            font-size: 0.7em;
            border-collapse: collapse;
            width: 100%;
        }
        .reveal th {
            border-bottom: 2px solid #42affa;
            color: #42affa;
        }
        .reveal td {
            border-bottom: 1px solid #555;
        }
        
        /* 左右布局容器 */
        .cols {
            display: flex;
            justify-content: space-between;
            align-items: center;
        }
        .col {
            flex: 1;
            padding: 20px;
        }
    </style>
</head>
<body>
    <div class="reveal">
        <div class="slides">

            <!-- Slide 1: 封面 -->
            <section>
                <h1>新一代架构技术调研</h1>
                <h3>& 核心代码功能预览</h3>
                <p>
                    <small>汇报人：<span class="highlight-text">技术团队</span> | 2023-11</small>
                </p>
                <aside class="notes">
                    这是演讲者注释（按 'S' 键查看）。
                    今天主要介绍我们要引入的新中间件，以及核心模块的代码重构。
                </aside>
            </section>

            <!-- Slide 2: 目录 -->
            <section>
                <h2>📝 今日议程</h2>
                <ul>
                    <li class="fragment fade-up">背景：当前系统的性能瓶颈</li>
                    <li class="fragment fade-up">调研：技术选型对比 (Redis vs Memcached)</li>
                    <li class="fragment fade-up">核心：新模块代码实现</li>
                    <li class="fragment fade-up">演示：Live Demo</li>
                    <li class="fragment fade-up">计划：上线路线图</li>
                </ul>
            </section>

            <!-- Slide 3: 垂直幻灯片容器 (向下翻页) -->
            <section>
                <!-- 3.1 -->
                <section>
                    <h2>1. 背景与痛点</h2>
                    <p class="danger-text">为什么我们需要重构？</p>
                    <p>向下滚动查看详细数据 &darr;</p>
                </section>
                
                <!-- 3.2 -->
                <section>
                    <h3>当前系统现状</h3>
                    <div class="cols">
                        <div class="col">
                            <ul>
                                <li>API 响应时间 > 2000ms</li>
                                <li>数据库连接池经常耗尽</li>
                                <li>代码耦合度过高，维护困难</li>
                            </ul>
                        </div>
                        <div class="col">
                            <!-- 这里可以用图片，这里用emoji代替 -->
                            <div style="font-size: 100px;">🐌💥</div>
                        </div>
                    </div>
                </section>
            </section>

            <!-- Slide 4: 技术调研 (表格) -->
            <section>
                <h2>2. 技术选型调研</h2>
                <p>缓存中间件对比</p>
                <table>
                    <thead>
                        <tr>
                            <th>特性</th>
                            <th>Redis (推荐)</th>
                            <th>Memcached</th>
                            <th>本地缓存</th>
                        </tr>
                    </thead>
                    <tbody>
                        <tr>
                            <td>数据结构</td>
                            <td class="highlight-text">丰富 (Hash, List, Set)</td>
                            <td>简单 (String)</td>
                            <td>对象</td>
                        </tr>
                        <tr>
                            <td>持久化</td>
                            <td class="highlight-text">支持 (RDB/AOF)</td>
                            <td>不支持</td>
                            <td>不支持</td>
                        </tr>
                        <tr>
                            <td>分布式</td>
                            <td>原生集群</td>
                            <td>客户端实现</td>
                            <td>单机</td>
                        </tr>
                        <tr>
                            <td>适用场景</td>
                            <td>复杂业务缓存</td>
                            <td>简单KV缓存</td>
                            <td>极热点数据</td>
                        </tr>
                    </tbody>
                </table>
            </section>

            <!-- Slide 5: 核心代码展示 (重点！) -->
            <section>
                <h2>3. 核心功能实现</h2>
                <p>使用 <span class="highlight-text">装饰器模式</span> 优化缓存逻辑</p>
                
                <!-- 
                     data-trim: 去除多余空格
                     data-line-numbers: 开启行号
                     "3-5|8-10": 分步高亮，先高亮3-5行，再高亮8-10行
                -->
                <pre><code data-trim data-noescape data-line-numbers="1|3-6|12-15" class="python">
import functools
import time

# 1. 定义缓存装饰器
def cache_decorator(timeout=300):
    def decorator(func):
        @functools.wraps(func)
        def wrapper(*args, **kwargs):
            key = generate_key(func.__name__, args)
            
            # 2. 检查缓存
            result = redis_client.get(key)
            if result:
                print(f"Cache Hit: {key}")
                return result
            
            # 3. 执行原函数并写入缓存
            result = func(*args, **kwargs)
            redis_client.setex(key, timeout, result)
            return result
        return wrapper
    return decorator
                </code></pre>
            </section>

            <!-- Slide 6: 架构图 (使用 fragment 分步显示) -->
            <section>
                <h2>4. 新系统架构图</h2>
                <div style="position: relative; width: 600px; height: 400px; margin: 0 auto; border: 2px dashed #555; display:flex; justify-content:center; align-items:center;">
                    
                    <!-- 简单的 CSS 方块模拟架构图 -->
                    <div class="fragment fade-in-then-semi-out" style="position:absolute; top:50px; background:#e74c3c; padding:20px; border-radius:10px;">
                        Web Client
                    </div>
                    
                    <div class="fragment fade-in-then-semi-out" style="position:absolute; top:150px; background:#f39c12; padding:20px; width: 300px; border-radius:10px; color:black;">
                        API Gateway (Nginx)
                    </div>

                    <div class="fragment fade-in-then-semi-out" style="position:absolute; bottom:50px; left:50px; background:#3498db; padding:20px; border-radius:10px;">
                        Service A
                    </div>

                    <div class="fragment fade-in-then-semi-out" style="position:absolute; bottom:50px; right:50px; background:#9b59b6; padding:20px; border-radius:10px;">
                        Service B
                    </div>
                    
                    <!-- 连线箭头（简单示意） -->
                    <div class="fragment" style="position:absolute; top:220px; color: #42affa;">
                        &darr; gRPC 调用 &darr;
                    </div>
                </div>
            </section>

            <!-- Slide 7: 结论与计划 -->
            <section>
                <h2>5. 结论 & Roadmap</h2>
                <ul>
                    <li>✅ 确认选用 Redis 作为核心缓存组件</li>
                    <li>✅ 核心装饰器代码已通过 Code Review</li>
                </ul>
                <hr>
                <div style="text-align: left; margin-top: 30px; font-size: 0.8em;">
                    <p>📅 <strong>Next Steps:</strong></p>
                    <ul>
                        <li><span style="color:#666">Week 1:</span> 搭建测试环境集群</li>
                        <li><span style="color:#fff">Week 2:</span> 压测与参数调优</li>
                        <li><span style="color:#42affa">Week 3:</span> 灰度上线 (10% 流量)</li>
                    </ul>
                </div>
            </section>

            <!-- Slide 8: 结束页 -->
            <section data-background-color="#42affa">
                <h1 style="color: white;">Q & A</h1>
                <p style="color: white;">感谢聆听</p>
            </section>

        </div>
    </div>

    <!-- 引入 Reveal.js 脚本 -->
    <script src="https://cdnjs.cloudflare.com/ajax/libs/reveal.js/5.0.4/reveal.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/reveal.js/5.0.4/plugin/notes/notes.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/reveal.js/5.0.4/plugin/markdown/markdown.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/reveal.js/5.0.4/plugin/highlight/highlight.min.js"></script>

    <script>
        // 初始化 Reveal.js
        Reveal.initialize({
            hash: true, // URL 包含幻灯片编号
            slideNumber: true, // 显示页码
            transition: 'convex', // 转场动画: none/fade/slide/convex/concave/zoom
            
            // 加载插件
            plugins: [ RevealMarkdown, RevealHighlight, RevealNotes ]
        });
    </script>
</body>
</html>